<template>
  <div class="bbb">
    <div>
      <table border="1" class="tab">
        <tr class="tr">
          <th>名称</th>
          <th>介绍名称</th>
          <th>标签</th>
          <th>优惠券类型</th>
          <th>最低消费</th>
          <th>优惠面值</th>
        </tr>
        <tr class="td">
          <td>{{ Data.name }}</td>
          <td>{{ Data.desc }}</td>
          <td>{{ Data.tag }}</td>
          <td>
            <span v-if="Data.goodsType == 0">通用领劵</span>
            <span v-else-if="Data.goodsType == 1">注册赠券</span>
            <span v-else>兑换码</span>
          </td>
          <td>满{{ Data.min }}元可用</td>
          <td>免减{{ Data.discount }}元</td>
        </tr>
        <tr class="tr">
          <th>每人限额</th>
          <th>当前状态</th>
          <th>商品范围</th>
          <th>有效期</th>
          <th>优惠兑换码</th>
          <th>发行数量</th>
        </tr>
        <tr class="td">
          <td>{{ Data.limit }}</td>
          <td>
            <span v-if="Data.status == 0">正常</span>
            <span v-if="Data.status == 1">已过期</span>
            <span v-if="Data.status == 2">下架</span>
          </td>
          <td>
            <span v-if="Data.type == 0">全场通用</span>
            <span v-else>指定商品</span>
          </td>
          <td>领取{{ Data.timeType }}有效</td>
          <td>{{ Data.code }}</td>
          <td>
            <span v-if="Data.total == 0">不限</span>
            <span v-else>{{ Data.total }}</span>
          </td>
        </tr>
      </table>
      <!-- <div>
        <el-descriptions
          title=""
          direction="vertical"
          :column="6"
          style="width: 95%; margin: auto; padding: 50px 0"
          border
        >
          <el-descriptions-item label="名称">{{
            Data.name
          }}</el-descriptions-item>
          <el-descriptions-item label="介绍名称">{{
            Data.desc
          }}</el-descriptions-item>
          <el-descriptions-item label="标签">{{
            Data.tag
          }}</el-descriptions-item>
          <el-descriptions-item label="优惠券类型">
            <span v-if="Data.goodsType == 0">通用领劵</span>
            <span v-else-if="Data.goodsType == 1">注册赠券</span>
            <span v-else>兑换码</span></el-descriptions-item
          >
          <el-descriptions-item label="最低消费"
            >满{{ Data.min }}元可用</el-descriptions-item
          >
          <el-descriptions-item label="优惠面值"
            >免减{{ Data.discount }}元</el-descriptions-item
          >
          <el-descriptions-item label="每人限额">{{
            Data.limit
          }}</el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <span v-if="Data.status == 0">正常</span>
            <span v-if="Data.status == 1">已过期</span>
            <span v-if="Data.status == 2">下架</span></el-descriptions-item
          >
          <el-descriptions-item label="商品范围">
            <span v-if="Data.type == 0">全场通用</span>
            <span v-else>指定商品</span></el-descriptions-item
          >
          <el-descriptions-item label="有效期"
            >领取{{ Data.timeType }}有效</el-descriptions-item
          >
          <el-descriptions-item label="优惠兑换码">{{
            Data.code
          }}</el-descriptions-item>
          <el-descriptions-item label="发行数量">
            <span v-if="Data.total == 0">不限</span>
            <span v-else>{{ Data.total }}</span></el-descriptions-item
          >
        </el-descriptions>
      </div> -->
    </div>
    <div>
      <el-form
        :inline="true"
        style="margin-left: 43px; padding-top: 20px; padding-left: 50 px"
        :model="formInline"
        class="demo-form-inline"
      >
        <!-- 请输入商品ID -->
        <el-form-item label="">
          <el-input
            style="width: 150px"
            v-model="formInline.userId"
            placeholder="请输入商品ID"
            size="mini"
          ></el-input>
        </el-form-item>
        <!-- 请输入商品ID -->
        <!-- 请输入商品编号 -->
        <el-form-item label="">
          <el-select size="mini" v-model="formInline.status" placeholder="请选择活动区域">
            <el-option label="未使用" value="0"></el-option>
            <el-option label="已使用" value="1"></el-option>
            <el-option label="已过期" value="2"></el-option>
            <el-option label="已下架" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!-- 请输入商品编号 -->

        <el-form-item>
          <!-- 查找 -->
          <el-button
            style="margin-left: 20px"
            type="primary"
            @click="handleGet()"
            icon="el-icon-search"
            size="mini"
            >查找</el-button
          >
          <!-- 查找 -->
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 95%; margin: auto" size="mini">
        <el-table-column
          prop="id"
          label="用户优惠券ID"
          sortable
          width="180"
        >
        </el-table-column>
        <el-table-column prop="userId" label="用户ID" width="180">
        </el-table-column>
        <el-table-column prop="addTime" label="领取时间"> </el-table-column>
        <el-table-column prop="status" label="使用状态">
          <template v-slot="{ row }">
            <p v-if="row.status == 0">未使用</p>
            <p v-if="row.status == 1">已使用</p>
            <p v-if="row.status == 2">已过期</p>
            <p v-if="row.status == 3">已下架</p>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="订单ID"> </el-table-column>
        <el-table-column prop="updateTime" label="使用时间"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { Couponlistuser, Couponread } from '@/api/hxz'
export default {
  data() {
    return {
      tableData: [],
      ids: null,
      fff: null,
      formInline: {
        userId: '',
        status: '',
        name: ''
      },
      // 表格
      // 表格
      Data: {
        name: '',
        desc: '',
        tag: '',
        goodsType: '',
        min: '',
        discount: '',
        limit: '',
        status: '',
        type: '',
        timeType: '',
        code: '',
        total: ''
      }
      // 表格
      // 表格
    }
  },
  methods: {
    idss() {
      this.ids = this.$route.query.id
      Couponread({ id: this.ids }).then((res) => {
        console.log(res.data, '0000000000')
        this.Data = res.data
      })
    },
    handleGet() {
      Couponlistuser({
        page: 1,
        limit: 20,
        couponId: this.ids,
        sort: 'add_time',
        order: 'desc'
      }).then((res) => {
        console.log(res)
        this.tableData = res.data.list
      })
    }
  },
  mounted() {
    this.idss()
    this.handleGet()
    this.$route.query.id
  }
}
</script>

<style lang="scss" scoped>
.bbb::v-deep {
  padding: 30px 10px;
  box-sizing: border-box;
  .el-descriptions-item__cell {
    text-align: center;
  }
  .tab {
    border-color: rgba(121, 107, 107, 0.151);
    /* 去掉表格的外边距 */
    margin: 0;
    /* 合并相邻单元格的边框 */
    border-collapse: collapse;
    width: 100%;
    .tr {
      height: 50px;
      background: #f2f6fc;
    }
    .td {
      text-align: center;
      height: 50px;
      background: #fff;
      color: #606266;
    }
  }
}
</style>
